<template>
  <div>
    <el-table
        :data="tableData5"
        style="width: 100%">
        <el-table-column type="expand">
        <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
                <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
                <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
                <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
                <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
                <span>{{ props.row.desc }}</span>
            </el-form-item>
            </el-form>
        </template>
        </el-table-column>
        <el-table-column
        label="商品 ID"
        prop="id">
        </el-table-column>
        <el-table-column
        label="商品名称"
        prop="name">
        </el-table-column>
        <el-table-column
        label="描述"
        prop="desc">
        </el-table-column>
    </el-table>

    <ul class="role-table">
        <li class="header">
            <div class="left">菜单列表</div>
            <div class="right">功能权限</div>
        </li>
        <div class="vertical-line"></div>
        <li  v-for="(item,index) in dataList" :key="item.id">
            <div class="left h40"  @click="fold(item)">
                <i :class="{'el-icon-caret-right':item.folded,'el-icon-caret-bottom':!item.folded}"
                v-cloak v-if="item.second"
                class="item-icon"></i>
                <el-checkbox @click.native="handleOneCheckAll($event,item)" v-cloak v-if="!item.second" :indeterminate="item.isIndeterminate" v-model="item.checkAll"> {{item.title}}</el-checkbox>
                    <span v-if="item.second" v-cloak>{{item.title}}</span>
            </div>
            <div class="right h40">
                <el-checkbox v-if="item.second" :indeterminate="item.isIndeterminate" @change="checkSecondAll(item)" v-model="item.firstCheckAll"> 所有</el-checkbox>

                <el-checkbox-group v-model="item.checkedCities" @change="handleOneCheckedCitiesChange(item)" v-else>
                    <el-checkbox  v-for="m in item.list" :label="m.id" :key="m.id" v-cloak> {{m.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="line"></div>
            <ul v-show="item.second&&!item.folded">
                <li class="h40" v-for="(second,cur) in item.second" :key="second.id">
                    <div class="left">
                        <el-checkbox v-model="second.checkAll" @change="handleCheckAllChange($event,item,second)" v-cloak>
                            {{second.title}}
                        </el-checkbox>
                    </div>
                    <div class="right">
                        <el-checkbox-group v-model="second.checkedCities" @change="handleCheckedCitiesChange(item,second)">
                            <el-checkbox v-for="p in second.list" :label="p.id" :key="p.id" v-cloak >
                                {{p.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="line"></div>
                </li>
            </ul>
        </li>
    </ul>
  </div>
  
</template>


<script>
    export default {
        data() {
            return {
                tableData5: [
                    {
                        id: '12987122',
                        name: '好滋好味鸡蛋仔',
                        category: '江浙小吃、小吃零食',
                        desc: '荷兰优质淡奶，奶香浓而不腻',
                        address: '上海市普陀区真北路',
                        shop: '王小虎夫妻店',
                        shopId: '10333'
                    }, {
                        id: '12987123',
                        name: '好滋好味鸡蛋仔',
                        category: '江浙小吃、小吃零食',
                        desc: '荷兰优质淡奶，奶香浓而不腻',
                        address: '上海市普陀区真北路',
                        shop: '王小虎夫妻店',
                        shopId: '10333'
                    }, {
                        id: '12987125',
                        name: '好滋好味鸡蛋仔',
                        category: '江浙小吃、小吃零食',
                        desc: '荷兰优质淡奶，奶香浓而不腻',
                        address: '上海市普陀区真北路',
                        shop: '王小虎夫妻店',
                        shopId: '10333'
                    }, {
                        id: '12987126',
                        name: '好滋好味鸡蛋仔',
                        category: '江浙小吃、小吃零食',
                        desc: '荷兰优质淡奶，奶香浓而不腻',
                        address: '上海市普陀区真北路',
                        shop: '王小虎夫妻店',
                        shopId: '10333'
                    }
                ],
                dataList: [
                    {
                        title: "概况",
                        id: "0",
                        checkedCities:[],
                        list: [
                            {
                                name: "浏览",
                                id: "10001"
                            },
                            {
                                name: "修改",
                                id: "11111"
                            }
                        ]
                    },
                    {
                        title: "会员管理",
                        id: "1",
                        second: [
                            {
                                title: "会员列表",
                                id: "11",
                                list: [
                                    {
                                        name: "新增",
                                        id: "10002"
                                    },
                                    {
                                        name: "修改",
                                        id: "10003"
                                    }
                                ],
                                checkedCities: []
                            },
                            {
                                title: "会员等级",
                                id: "12",
                                list: [
                                    {
                                        name: "新增",
                                        id: "10004"
                                    },
                                    {
                                        name: "修改",
                                        id: "10005"
                                    },
                                    {
                                        name: "删除",
                                        id: "1006"
                                    }

                                ],
                                checkedCities: []
                            }
                        ]
                    },
                    {
                        title: "菜品管理",
                        id: "2",
                        second: [
                            {
                                title: "菜品列表",
                                id: "21",
                                list: [
                                    {
                                        name: "新增",
                                        id: "10007"
                                    },
                                    {
                                        name: "修改",
                                        id: "10008"
                                    }
                                ],
                                checkedCities: []
                            },
                            {
                                title: "会员等级",
                                id: "22",
                                list: [
                                    {
                                        name: "浏览",
                                        id: "10009"
                                    },
                                    {
                                        name: "新增",
                                        id: "10010"
                                    },
                                    {
                                        name: "修改",
                                        id: "10011"
                                    },
                                    {
                                        name: "删除",
                                        id: "10012"
                                    }
                                ],
                                checkedCities: []
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            fold: function (item) {
                if (typeof item.folded === "undefined") {
                    this.$set(item, "folded", true);
                } else {
                    item.folded = !item.folded;
                }
            },
            // 全选一项
            handleCheckAllChange(event, item, second) {
                let arr = [];
                for (let a = 0; a < second.list.length; a++) {
                    arr.push(second.list[a].id)
                }
                if (typeof second.checkedCities === "undefined") {
                    this.$set(second, "checkedCities", arr);
                }
                second.checkedCities = event.target.checked ? arr : [];
                // if (typeof second === "undefined") {
                //     this.$set(second, "isIndeterminate", false)
                // }
                // second.isIndeterminate = false;
                if (typeof second.checkAll === "undefined") {
                    this.$set(second, "checkAll", true);
                }
                if (typeof item.isIndeterminate === "undefined") {
                    this.$set(item, "isIndeterminate", true);
                }
                for (let a = 0; a < item.second.length; a++) {
                    if (!item.second[a].checkAll) {
                        item.isIndeterminate = true;
                        for (let a = 0; a < item.second.length; a++) {
                            if (item.second[a].checkAll) {
                                break
                            } else {
                                item.isIndeterminate = false;
                                item.firstCheckAll = false;
                            }
                        }
                        break
                    } else {
                        item.isIndeterminate = false;
                        item.firstCheckAll = true;
                    }
                }

            },
            // 单选
            handleCheckedCitiesChange(item, second) {
                let checkedCount = second.checkedCities.length;
                if (typeof second.checkAll === "undefined") {
                    this.$set(second, "checkAll", false);
                }
                if (typeof second.isIndeterminate === "undefined") {
                    this.$set(second, "isIndeterminate", false);
                }
                if (typeof item.isIndeterminate === "undefined") {
                    this.$set(item, "isIndeterminate", true);
                }
                second.isIndeterminate = checkedCount > 0 && checkedCount < second.list.length;
                second.checkAll = checkedCount === second.list.length;
                if (checkedCount === 0) {
                    second.isIndeterminate = false
                }
                for (let a = 0; a < item.second.length; a++) {
                    if (!item.second[a].checkAll) {
                        item.isIndeterminate = true;
                        for (let b = 0; b < item.second.length; b++) {
                            if (item.second[b].checkedCities.length > 0) {
                                break
                            } else {
                                item.isIndeterminate = false;
                                item.firstCheckAll = false;
                            }
                        }
                        break
                    } else {
                        item.isIndeterminate = false;
                        item.firstCheckAll = true;
                    }
                }

            },
            // 点击所有
            checkSecondAll: function (item) {
                if (typeof item.firstCheckAll === "undefined") {
                    this.$set(item, "firstCheckAll", true);
                }
                for (let a = 0; a < item.second.length; a++) {
                    this.checkItemAll(item.firstCheckAll, item.second[a])
                }
                item.isIndeterminate=false
            },
            checkItemAll: function (flag, item) {
                let arr = [];
                for (let a = 0; a < item.list.length; a++) {
                    arr.push(item.list[a].id)
                }
                if (typeof item.checkedCities === "undefined") {
                    this.$set(item, "checkedCities", arr);
                }
                item.checkedCities = flag ? arr : [];
                item.checkAll = flag;
            },
            
            // 没有二级菜单
            handleOneCheckedCitiesChange:function (item) {
                let checkedCount = item.checkedCities.length;
                if (typeof item.isIndeterminate === "undefined") {
                    this.$set(item, "isIndeterminate", false);
                }
                if (typeof item.checkAll === "undefined") {
                    this.$set(item, "checkAll", false);
                }
                item.isIndeterminate = checkedCount > 0 && checkedCount < item.list.length;
                item.checkAll = checkedCount === item.list.length;
            },
            handleOneCheckAll:function (event,item) {
                let arr = [];
                for (let a = 0; a < item.list.length; a++) {
                    arr.push(item.list[a].id)
                }

                item.checkedCities = event.target.checked ? arr : [];
            }
        }
    }

</script>


<style type="text/css">
    .gray-bg {
        background-color: #f3f3f4;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    
    ul,li{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .el-checkbox{
        margin:0;
    }
    .el-checkbox-group{
        height: 39px;
    }

    .role-table {
        border: 1px solid #e0e0e0;
        border-bottom: none;
        padding: 0;
        position: relative;
    }

    .header {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e7e7e7;
        background: #F8F8F9;
        text-align: center;
    }

    .vertical-line {
        width: 1px;
        height: 100%;
        background: #ddd;
        position: absolute;
        left: 30%;
        top: 0
    }

    .left {
        width: 30%;
        float: left;
        padding-left: 10px;
        user-select: none;
        cursor: pointer;
    }

    .one {
        padding-left: 20px;
    }

    .right {
        width: 70%;
        float: left;
        padding-left: 10px;
    }

    .item-icon {
        margin-left: -5px;
        padding: 5px;
    }

    .line {
        clear: both;
        width: 100%;
        height: 1px;
        background: #e0e0e0;
    }
    .h40{
        height: 39px;
        line-height: 39px;
    }
    [v-cloak] {
        display: none;
    }
</style>
